<template>
  <card-list :loading="loading" :finished="finished" :list="list" @refresh="onRefresh" @loadNextPage="onLoadNextPage">
    <template #list-item="{item}">
      <div class="card" @click="onClick(item)">
        <div class="top">
          <div class="cert-status" :style="item.certStatus == 0 ? 'background: #4c82fe' : 'background: #faad14'">
            {{ CertStatus.find(i => i.value === item.certStatus)?.text || item.certStatus || '-' }}
          </div>
          <div class="title">{{ item.holder || '-' }}</div>
          <img v-if="item.auditStatus === 1" class="status-img" :src="acceptImg" />
          <img v-else-if="item.auditStatus === 2" class="status-img" :src="rejectImg" />
          <img v-else-if="item.auditStatus === 0" class="status-img" :src="examineImg" />
        </div>
        <div>
          <span class="label">证照类型</span>
          <div class="value">{{ CertType.find(i => i.value === item.certType)?.text || item.certType || '-' }}</div>
        </div>
        <div>
          <span class="label">原单位</span>
          <div class="value">{{ item.origCustodyUnit || '-' }}</div>
        </div>
        <div>
          <span class="label">新单位</span>
          <div class="value" style="margin-bottom: 0">{{ item.custodyUnit || '-' }}</div>
        </div>
      </div>
    </template>
  </card-list>
  <search-panel :options="searchOptions" @search="onSearch"></search-panel>
</template>

<script setup>
  import acceptImg from '@/assets/icons/accept.png'
  import rejectImg from '@/assets/icons/reject.png'
  import examineImg from '@/assets/icons/examine.png'
  import {CertType, CertStatus} from '@/utils/enum.js'
  const router = useRouter()
  const loading = ref(false)
  const finished = ref(false)
  const searchOptions = ref([
    {label: '姓名', key: 'holder', type: 'field', placeholder: '填写姓名（支持模糊搜索）'},
    {label: '证照类型', key: 'certType', type: 'picker', columns: CertType},
  ])
  const paging = ref({
    pageIndex: 1,
    pageSize: 5,
  })
  const request = ref({
    holder: undefined,
    certType: undefined,
  })
  const list = ref([])
  const onClick = data => {
    router.push({path: '/auditSubmit', query: {id: data.id}})
  }
  const onSearch = res => {
    request.value = {
      holder: res.holder,
      certType: res.certTypeValue,
    }
    onRefresh()
  }
  const onRefresh = () => {
    // 清空列表数据
    finished.value = false
    paging.value.pageIndex = 1
    list.value = []
    // 重新加载数据
    onLoad()
  }
  const onLoadNextPage = () => {
    paging.value.pageIndex++
    onLoad()
  }
  const onLoad = () => {
    loading.value = true
    $post('/api/v1/cert/transfer/record/paging', {
      ...paging.value,
      request: {
        ...request.value,
        deleted: 0,
        canAudit: 1,
      },
    })
      .then(res => {
        const {
          data,
          paging: {totalPage},
        } = res
        list.value = list.value.concat(data)
        if (paging.value.pageIndex >= totalPage) {
          finished.value = true
        }
      })
      .catch(() => {
        finished.value = true
      })
      .finally(() => {
        loading.value = false
      })
  }
  onMounted(() => {
    onRefresh()
  })
</script>
<style lang="scss" scoped>
  .card {
    margin: 0 auto 24px;
    padding: 32px;
    position: relative;
    width: calc(686px - 32px - 32px);
    background: #ffffff;
    box-shadow: 0px 4px 24px 0px rgba(100, 101, 102, 0.12);
    border-radius: 16px 16px 16px 16px;
    font-size: 30px;
    .top {
      margin-bottom: 32px;
      .cert-status {
        display: inline-block;
        vertical-align: middle;
        border-radius: 8px 8px 8px 8px;
        padding: 6px 12px;
        font-size: 24px;
        color: #ffffff;
        line-height: 32px;
        margin-right: 24px;
      }
      .status-img {
        position: absolute;
        right: 32px;
        width: 104px;
        height: 104px;
      }
      .title {
        display: inline-block;
        vertical-align: middle;
        font-weight: 500;
        font-size: 34px;
        line-height: 46px;
      }
    }
    .label {
      display: inline-block;
      text-align-last: justify;
      vertical-align: top;
      white-space: nowrap;
      width: 120px;
      font-size: 30px;
      color: #969799;
      margin-right: 24px;
    }
    .value {
      display: inline-block;
      vertical-align: top;
      width: 470px;
      color: #323233;
      margin-bottom: 24px;
    }
  }
</style>
